<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>径向渐变</title>
    <style>
        .box1{
            width:300px;
            height: 300px;
            /* 
                radial-gradient()径向渐变(放射性的效果)

                默认情况下径向渐变圆心的形状根据元素的形状来计算的
                正方形--》圆形
                长方形--》椭圆形
                -我们也可以手动指定径向渐变的大小
                circle
                ellipse

                -也可以指定渐变的位置
                -语法：
                radial-gradient(大小 at 位置，颜色 位置，颜色  位置，颜色 位置)
                    大小：
                    circle 圆形
                    elipse椭圆
                    closet-side 近边
                    closet-corner 近角
                    farthest-side 远边
                    farthest-corner 远角

                    位置：
                    top right left center bottom
            */
            /* background-image: radial-gradient(100px 100px,red,yellow); */
            /* background-image: radial-gradient(100px 100px at 0 0,red,#bfa); */
            /* background-image: radial-gradient(100px 100px at center center,red,#bfa); */
            /* background-image: radial-gradient( at top left,red,#bfa); */
            background-image: radial-gradient(closest-side at 100px 100px,red,#bfa);
            /* background-image: radial-gradient(farthest-corner at 100px 100px,red,#bfa); */

        }
        
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>